<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 会员价格设置
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="editVisible = true">新建配置
				</el-button>
				<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除
				</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="days" label="充值天数"></el-table-column>
				<el-table-column label="充值价格">
					<template slot-scope="scope">￥{{scope.row.price}}</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog v-dialogDrag title="编辑" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="充值天数">
					<el-input type="number" v-model="form.days"></el-input>
				</el-form-item>
				<el-form-item label="充值价格">
					<el-input v-model="form.price"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {
					id: '',
					days: '',
					price: '',
				},
				idx: -1,
				id: -1,
				Authorization: {
					'Authorization': localStorage.getItem('htk_token')
				},
				token: localStorage.getItem('htk_token')
			};
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				let vm = this;
				this.$http.get(this.$host + '/admin/setting/getVipPackage', {
					headers: {
						'Authorization': this.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function(response) {
					if (response.data.code != 1000) {
						vm.$message.error('搜索服务异常');
						return;
					}
					vm.tableData = response.data.data.list;
					vm.pageTotal = response.data.data.totalRow;
				});
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					let vm = this;
					this.$http.get(this.$host + '/admin/setting/delVipPackage?ids=' + row.id, {
						headers: {
							'Authorization': this.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					}).then(function(response) {
						if (response.data.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.$message.success('删除成功');
						vm.tableData.splice(index, 1);
					});

				}).catch(() => {});
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {
				const length = this.multipleSelection.length;
				let str = '';
				this.delList = this.delList.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].id + ',';
				}
				str = str.substr(0, str.length - 1)
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					let vm = this;
					this.$http.get(this.$host + '/admin/setting/delVipPackage?ids=' + str, {
						headers: {
							'Authorization': this.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					}).then(function(response) {
						if (response.data.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.$message.success('删除成功');
						vm.getData();
						this.multipleSelection = [];
					});

				}).catch(() => {});
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.form = row;
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit() {
				var vm = this;
				this.$http.post(this.$host + '/admin/setting/addVipPackage', vm.form, {
					headers: {
						'Authorization': vm.token
					}
				}).then(function(response) {
					if (response.data.code == 1000) {
						vm.$message.success('提交成功');
						vm.editVisible = false;
						//清空录入内容
						vm.getData();
						vm.form.id = '';
						vm.form.days = '';
						vm.form.price = '';
					} else {
						vm.$message.error('录入失败');
					}
				});

			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
